import React, {useState} from 'react'
import { Button, message } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Form, Input } from 'antd';
import { Card } from 'antd';
import { useAuth } from '../context/AuthProvider';
const { Meta } = Card;
const Test = () => {
    const [messageApi, contextHolder] = message.useMessage();
    const {saveUser} = useAuth();
    const onFinish = (values) => {
        console.log(values);
        fetch(
            'https://www.fastmock.site/mock/65721c49c01f167ea082d0dc81fb0c41/api/login',
            {
                method:'post',
                body:JSON.stringify(values),
                headers: {
                    'Content-Type': 'application/json'
                }
            }
        ).then(res=>res.json())
        .then(res=>{
            console.log(res)
            if (res.data.error){
                messageApi.error(res.data.error);
            }else{
                saveUser(res.data);
                messageApi.success('登录成功');
            }
        })
    };
    return (
        <div style={{width: 300, margin: '0 auto'}}>
            {contextHolder}
            <Form
                onFinish={onFinish}
            >
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your Username!',
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                </Form.Item>
                <Form.Item
                    name="pwd"
                    rules={[
                        {
                            required: true,
                            message: 'Please input your Password!',
                        },
                    ]}
                >
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>

                <Form.Item>
                    <Button block type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Test